<template>
	<view>
		<view class="page-foot bg-white flex-box">
			<view class="g-price1 flex-1">{{orderinfo.pay_price}}</view>
			<!-- <view class="g-btn1 mini" @click="payPopOpen">立即支付</view> -->
			<view class="g-btn1 mini" @click="pay()">立即下单</view>
		</view>
		<view class=" container">
			<view class="course-list2 plr30">
				<navigator url="#" class="nav-course flex-box ptb30" hover-class="none">
					<image class="img-course mr20" :src="orderinfo.course.thumb_image" mode="aspectFill"></image>
					<view class="flex-1">
						<view class="m-ellipsis fs24 col-0 mb10">{{orderinfo.course.name}}</view>
						<view class="m-ellipsis fs20 col-6 mb10">主讲：{{orderinfo.course.teacher.name}}</view>
						<view class="g-price1">{{orderinfo.course.salesprice}}</view>
					</view>
				</navigator>
			</view>
			<!--  -->
			<view class="info-box mt40 mlr30 pb30 m-hairline--bottom">
				<view class="fs32 col-3 mb30">订单信息</view>
				<view class="flex-box">
					<view class="fs28 col-9 flex-1">订单金额</view>
					<view class="g-price1">{{orderinfo.total_price}}</view>
				</view>
				<view class="flex-box" >
					<view class="fs28 col-9 flex-1">优惠金额</view>
					
					-<view class="g-price1">{{orderinfo.coupon_price}}</view>
				</view>
			</view>
		</view>
		<!-- 付款弹窗 -->
		<uni-popup ref="payPopup" type="bottom">
			<view class="pay-pop" catchtouchmove="true">
				<view class="flex-box mb20 plr30">
					<view class="fs36 col-black flex-1">请选择支付方式</view>
					<view class="g-price2 fwb">{{orderinfo.pay_price}}</view>
				</view>
				<view class="pay-item flex-box m-hairline--bottom">
					<image class="icon1 mr30" src="/static/icon/icon_wechat.png" mode="aspectFit"></image>
					<view class="fs28 col-black flex-1">微信支付</view>
					<image class="icon2" src="/static/icon/circle_selected" mode="aspectFit"></image>
				</view>
				<!-- <view class="pay-item flex-box m-hairline--bottom">
					<image class="icon1 mr30" src="/static/icon/icon_alipay.png" mode="aspectFit"></image>
					<view class="fs28 col-black flex-1">支付宝支付</view>
					<image class="icon2" src="/static/icon/circle_selected.png" mode="aspectFit"></image>
				</view> -->
				<view class="ptb40 col-red fs28 tc" @click="pay()">立即支付</view>
			</view>
		</uni-popup>
		<!-- 付款成功弹窗 -->
		<uni-popup ref="successPopup" type="bottom">
			<view class="g-success-pop tc" catchtouchmove="true" @click="paySuccessPopClose">
				<image class="icon-success" src="/static/icon/icon_circle_success.png" mode="aspectFit"></image>
				<view class="fs30 col-3">恭喜您购买成功！</view>
				<view class="g-btn1">观看课程</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			course_id: 0,
			orderinfo:{course:{teacher:{name:''}}}
		};
	},
	onLoad(options) {
		this.course_id = options.course_id;
		// #ifdef H5
		let openid = options.openid || '';
		if(openid == '' && this.$core.getCache('wx_openid')){
			openid = this.$core.getCache('wx_openid');
		}
		if(openid == ''){
		 location.href = getApp().globalData.apiBaseUri+"/xiluedu.user/auth?course_id="+options.course_id+'&target_url='+ encodeURIComponent(location.href);
		 return false;
		}
		this.$core.setCache('wx_openid', openid);
		this.fetchCourseSure();
		// #endif
		//#ifdef MP-WEIXIN
		this.fetchCourseSure();
		// #endif
	},
	methods: {
		
		//线上课程订单
		fetchCourseSure(){
			let course_id = this.course_id;
			this.$core.post({url:'xiluedu.course_order/sure',data:{course_id: course_id},success:(ret)=>{
				 this.orderinfo = ret.data;
			}});
		},
		
		//下单
		pay(){
			let data = {course_id:this.course_id,platform:'wxmini'};
			// #ifdef H5
				data.platform = 'wxpublic';
			// #endif
			
			this.$core.post({url:'xiluedu.course_order/create_order',data: data,success:(ret)=>{
				 // this.payment(ret.data);
				 uni.redirectTo({
				 	url: '/pages/pay/pay?type=course&order_id='+ret.data.id+'&order_no='+ret.data.order_no+'&pay_price='+ret.data.pay_price
				 })
			}});
		},
		payment(order){
			this.$core.post({url:'xiluedu.pay/pay',data:{type:'course',pay_type:1,order_id:order.id,platform:'wxmini'},success:(ret)=>{
				let wxconfig =  ret.data;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: wxconfig.timeStamp,
					nonceStr: wxconfig.nonceStr,
					package: wxconfig.package,
					signType: wxconfig.signType,
					paySign: wxconfig.paySign,
					success: function (res) {
						console.log(res);
						this.paySuccessPopOpen()
					},
					fail: function (err) {
						console.log(err);
					}
				});
			}});
		},
		
		// 打开付款弹窗
		payPopOpen() {
			this.$refs.payPopup.open();
		},
		// 打开付款成功弹窗
		paySuccessPopOpen() {
			
			
			this.$refs.successPopup.open();
		},
		// 关闭付款成功弹窗
		paySuccessPopClose() {
			this.$refs.successPopup.close();
		}
	}
};
</script>

<style scoped>
.course-list2 {
	border-bottom: 20rpx solid #f7f7f7;
}
.course-list2 .img-course {
	width: 193rpx;
	height: 110rpx;
}

.info-box .g-price1 {
	font-size: 34rpx;
	color: var(--red);
}
.info-box .g-price1::before {
	font-size: 26rpx;
}

.page-foot {
	padding: 15rpx 30rpx;
}
.page-foot .g-price1 {
	font-size: 40rpx;
	color: var(--red);
	line-height: 44rpx;
}
.page-foot .g-price1::before {
	font-size: 24rpx;
}
</style>
